<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/index.js"></script>
    <title>Star Bucks</title>
</head>
<body class="container-fluid">
    <div class="row">
        <div class="col-12 col-lg-3 left">
            <div id="template1">
                <div class="row">
                    <div class="col-10">
                        <ul class="nav">
                            <li class="nav-item">
                                <a class="nav-link active" href="#">
                                    <img width="40" class="rounded-circle" src="images/logo.png">
                                </a>
                            </li>
                            <li class="nav-item mt-1"><a class="nav-link">账户</a></li>
                            <li class="nav-item mt-1"><a class="nav-link">菜单</a></li>
                        </ul>
                    </div>
                    <div class="col-2 mt-2 font-menu text-right">
                        <a id="a1" href="javascript:void(0);"><i class="fa fa-bars"></i></a>
                    </div>
                    <div class="margin1">
                        <h5 class="ml-3 my-3 d-none d-sm-block text-lg-center">
                            <b>心情惬意，来杯咖啡吧</b>&nbsp;&nbsp;<i class="fa fa-coffee"></i>
                        </h5>
                        <div class="ml-3 my-3 d-none d-sm-block text-lg-center">
                            <a class="card-link btn rounded-pill text-success"><i class="fa fa-user-circle"></i>&nbsp;登&nbsp;录</a>
                            <a class="card-link btn btn-outline-success rounded-pill text-success">&nbsp;注&nbsp;册</a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="template2" class="d-none">
                <div class="row">
                    <div class="col-10">
                        <ul  class="nav">
                            <li class="nav-item"><a class="nav-link active" href="#"><img width="40" class="rounded-circle" src="images/logo.png"></a></li>
                            <li class="nav-item"><a class="nav-link mt-2">咖啡俱乐部</a></li>
                        </ul>
                    </div>
                    <div class="col-2 mt-2 font-menu text-right">
                        <a id="a2" href="javascript:void(0);"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="margin2">
                    <div class="ml-5 mt-5">
                        <h6><a href="#">门店</a></h6>
                        <h6><a href="#">俱乐部</a></h6>
                        <h6><a href="#">菜单</a></h6>
                        <hr/>
                        <h6><a href="#">移动应用</a></h6>
                        <h6><a href="#">臻选精品</a></h6>
                        <h6><a href="#">专星送</a></h6>
                        <h6><a href="#">咖啡讲座</a></h6>
                        <h6><a href="#">烘培工厂</a></h6>
                        <h6><a href="#">帮助中心</a></h6>
                        <hr/>
                        <a class="card-link btn rounded-pill text-success"><i class="fa fa-user-circle"></i>&nbsp;登&nbsp;录</a>
                        <a class="card-link btn btn-outline-success rounded-pill text-success">&nbsp;注&nbsp;册</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-9 right p-0 clearfix">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner max-h">
                    <div class="carousel-item active">
                        <img src="images/001.jpg" class="d-block w-100">
                    </div>
                    <div class="carousel-item">
                        <img src="images/002.jpg" class="d-block w-100">
                    </div>
                    <div class="carousel-item">
                        <img src="images/003.jpg" class="d-block w-100">
                    </div>
                </div>
                 <a class="carousel-control-prev" href="#carouselExampleControls" data-slide="prev">
                     <span class="carousel-control-prev-icon"></span>
                 </a>
                <a class="carousel-control-next" href="#carouselExampleControls" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>

            <div class="p-4 list">
                <h5 class="text-center my-3">咖啡推荐</h5>
                <h5 class="text-center mb-4 text-secondary"><small>在购买旗舰店可以发现更多咖啡心意</small></h5>

                <div class="card-columns">
                    <div class="my-4 my-sm-0"><img class="card-img-top" src="images/006.jpg"></div>
                    <div class="my-4 my-sm-0"><img class="card-img-top" src="images/004.jpg"></div>
                    <div class="my-4 my-sm-0"><img class="card-img-top" src="images/005.jpg"></div>
                </div>
            </div>

            <div class="row py-5">
                <div class="col-12 col-sm-6 pt-2">
                    <div class="card border-0 text-center text-sm-left">
                        <div class="card-body ml-5">
                            <h4 class="card-title">咖啡俱乐部</h4>
                            <p class="card-text">开启您的星享之旅，星星越多、会员等级越高，好礼越丰富。</p>
                            <a href="#" class="card-link btn btn-outline-success">注册</a>
                            <a href="#" class="card-link btn btn-outline-success">登录</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 text-center mt-5">
                    <a href="#"><img class="img-fluid" src="images/007.png" ></a>
                </div>
            </div>

            <div class="p-4 list">
                <h5 class="text-center my-3">咖啡精选</h5>
                <h5 class="text-center mb-4 text-secondary"><small>在购物旗舰店可以发现更多咖啡心意</small></h5>
                <div class="row">
                    <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                        <div class="bg-light p-4 list-border rounded">
                            <img class="img-fluid" src="images/008.jpg">
                            <h6 class="text-secondary text-center mt-3">套餐一</h6>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                        <div class="bg-light p-4 list-border rounded">
                            <img class="img-fluid" src="images/009.jpg">
                            <h6 class="text-secondary text-center mt-3">套餐二</h6>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                        <div class="bg-light p-4 list-border rounded">
                            <img class="img-fluid" src="images/010.jpg">
                            <h6 class="text-secondary text-center mt-3">套餐三</h6>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                        <div class="bg-light p-4 list-border rounded">
                            <img class="img-fluid" src="images/011.jpg">
                            <h6 class="text-secondary text-center mt-3">套餐四</h6>
                        </div>
                    </div>

                </div>
            </div>

            <div class="p-4">
                <h5 class="text-center my-3">咖啡讲堂</h5>
                <h5 class="text-center mb-4 text-secondary">了解更多咖啡文化</h5>
                <div class="box">
                    <ul id="ulList" class="clearfix">
                        <li class="list-border rounded">
                            <img width="300" src="images/015.jpg">
                            <h6 class="text-center mt-3">咖啡种植</h6>
                        </li>
                        <li class="list-border rounded">
                            <img width="300" src="images/014.jpg">
                            <h6 class="text-center mt-3">咖啡种植</h6>
                        </li>
                        <li class="list-border rounded">
                            <img width="300" src="images/013.jpg">
                            <h6 class="text-center mt-3">咖啡种植</h6>
                        </li>
                        <li class="list-border rounded">
                            <img width="300" src="images/012.jpg">
                            <h6 class="text-center mt-3">咖啡种植</h6>
                        </li>
                    </ul>
                    <div id="left">
                        <i class="fa fa-chevron-circle-left fa-2x text-success"></i>
                    </div>
                    <div id="right">
                        <i class="fa fa-chevron-circle-right fa-2x text-success"></i>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div id="footer" class="row fixed-bottom d-block d-sm-none  py-1 bg-light border-top">
        <ul class="text-center p-0" id="myTab">
            <li><a class="ab b text-dark" href="#"><i class="fa fa-home fa-2x p-1"></i><br/>主页</a></li>
            <li><a class="b text-dark" href="javascript:void(0);"><i class="fa fa-calendar-minus-o fa-2x p-1"></i><br/>门店</a></li>
            <li><a class="b text-dark" href="javascript:void(0);"><i class="fa fa-user-circle-o fa-2x p-1"></i><br/>我的账户</a></li>
            <li><a class="b text-dark" href="javascript:void(0);"><i class="fa fa-bitbucket-square fa-2x p-1"></i><br/>菜单</a></li>
            <li><a class="b text-dark" href="javascript:void(0);"><i class="fa fa-table fa-2x p-1"></i><br/>更多</a></li>
        </ul>
    </div>
</body>
<script>
    $(function (){
        var nowIndex = 0
        var liNumber = $("#ulList li").length
        function change(index){
            var ulMove = index * 300;
            $("#ulList").animate({left:"-"+ulMove+"px"},500)
        }
        $("#left").click(function (){
            nowIndex = (nowIndex > 0)?(--nowIndex):0
            change(nowIndex)
        })
        $("#right").click(function (){
            nowIndex = (nowIndex < liNumber - 1)?(++nowIndex):(liNumber - 1)
            change(nowIndex)
        })
    })
</script>
</html>